<template>
	<view class="class">
	 <!-- <view class="date_select">
			<lxCalendar @change="change"></lxCalendar>
		</view>
		<u-divider text="课时安排"></u-divider>  -->

		<view class="class_list">
			<view class="class_list_item" v-for="item in list" :key="item.classHoursId">
				<view class="class_list_item_cont">
					<view class="title">{{ item.type }}</view>
					 <view class="site">
						<text class="item">地点：</text>
						<text>甘肃省武威市凉州区</text>
					</view> 
					<view class="startTime">
						<text class="item">课程时长：</text>
						 <u-icon name="clock"></u-icon> 
						<text>{{item.classDuration}}(小时)</text>
					</view>
					<view class="startTime">
						<text class="item">预约人数：</text>
						<text>{{ item.maxNum }}(人)</text>
					</view>
					<view class="state">
						<text class="item">课程状态：</text>
						<text class="style">{{ item.state | stateName }}</text>
					</view>
					<view class="state" v-if="item.isSubscribe">
						<text class="item">开始时间：</text>
						<text class="style">{{ formatDate(item.startDate) }}</text>
					</view>
					<view class="state" v-if="item.isSubscribe">
						<text class="item">结束时间：</text>
						<text class="style">{{ formatDate(item.endDate) }}</text>
					</view>

					<view class="u-page__button-item" v-if="!item.isSubscribe" @click="onApply(item)">
						<u-button
								text="预约报名"
								size="small"
								type="primary"
						></u-button>
					</view>
					<view class="u-page__button-item" v-else @click="clearApply(item)">
						<u-button
								text="取消报名"
								size="small"
								type="primary"
						></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {classHoursList, subscribe,cancelSubscribe} from '../../../common/api'
import lxCalendar from '../../../components/lx-calendar/lx-calendar.vue'
export default {
	components: {
		lxCalendar,
	},
	data() {
		return {
			list: [],
			userData: uni.getStorageSync('userData'),
		}
	},
	filters: {
		stateName: function (value) {
			if(value == 0){
				return '已安排'
			} else if(value == 1) {
				return '进行中'
			} else if(value == 2) {
				return '已完成'
			} else if(value == 3) {
				return '已取消'
			} else if(value == 4) {
				return '已满员'
			}
		}
	},
	onLoad(o) {	
		this.getClassHoursList()
		
	},
	methods: {
		change(e) {
			console.log(e);
		},
		async getClassHoursList() {
			let res = await classHoursList(this.userData.user.traineeId)
			console.log(res, 1111);
			this.list = res
		},
		async onApply(o){
			let params = {
				coachId: o.coachId,
				traineeId: this.userData.user.traineeId,
				classHoursId: o.classHoursId
			}
			let res = await subscribe(params)

			if(res){

				uni.$u.toast('报名成功')
				this.getClassHoursList()
			} 
			
			
		},
		async clearApply(o){
			console.log(o, 213);
			let res = await cancelSubscribe(this.userData.user.traineeId, o.classHoursId)
			console.log(res, 222);
			uni.$u.toast('取消报名成功')
			this.getClassHoursList()
		},
		// 日期格式化方法
		formatDate(data) {
			const date = new Date(data);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始‌:ml-citation{ref="1,4" data="citationList"}
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');
			// return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			return `${year}-${month}-${day}`;
		}
	}
}
</script>

<style lang="scss" scoped>
.class {
	.add_button {
		margin: 32rpx;
		width: 200rpx;
	}

	.class_list {
		margin: 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.class_list_item {
			width: 100%;
			margin-bottom: 32rpx;

			.class_list_item_cont {
				text-align: c;
				background: #f5f5f5;
				border-radius: 15rpx;
				padding: 20rpx;

				.title {
					font-size: $uni-font-size-medium;
					font-weight: bold;
					margin-bottom: 25rpx;
					text-align: center;
				}

				.site,
				.startTime,
				.endTime,
				.num,
				.state {
					display: flex;
					font-size: $uni-font-size-small;
					margin-bottom: 10rpx;

					.item {
						width: 180rpx;
					}

					text {
						margin-left: 10rpx;
						color: $uni-color-type1;
					}

					.style {
						color: #333;
						font-weight: bold;
					}

					.content {
						width: calc(100% - 180rpx);
					}
				}
				.u-page__button-item {
					margin-top: 32rpx;
				}
			}

			.describe {
				background: #f5f5f5;
				border-radius: 15rpx;
				padding: 20rpx;
				margin-top: 32rpx;
				.title {
					font-size: $uni-font-size-medium;
					font-weight: bold;
					padding-bottom: 20rpx;
				}
				.content {
					color: $uni-color-type1;
					font-size: $uni-font-size-small;
				}
			}
		}
	}
}
</style>
